/**
 * Created by liuzengrong on 2019/8/12.
 */
import React, {Component} from 'react';
import {PageHeader, message, Typography, Modal, Form, Input, Row, Col} from 'antd';
import styles from './index.less';
import axios from '@/components/Engineering/axios';
import Validator from '@/utils/Validator'
import {Link, browserHistory} from 'dva/router';


const FormItem = Form.Item
const {Paragraph} = Typography;



class Service extends React.Component {
  constructor(props:any) {
    super(props);
    this.state = {
      businessName: '',
    };
    this.ACJSESSIONID = sessionStorage.getItem('ACJSESSIONID')
  }


  handleSubmit = () => {
    this.props.form.validateFields((err: any, values: any) => {
      if (err) return message.error("填写的参数不完整");
      values.type = this.state.productType;
      // this.ACJSESSIONID ? null : values.code = LESSEE_CODE;
      values.code = LESSEE_CODE
      axios
        .ajax({url: `${MC_PATH}/api/web/apply`, params: {...values}}, 'post')
        .then(res => {
          if (res && res.resultCode == 'ok') {
            message.success('您已经提交成功，请耐心等待，我们会尽快联系您，谢谢！');
            this.props.form.resetFields()
            this.setState({productvisable: false})
          } else if (res.errMessage) {
            message.error(res.content || res.errMessage);
          }
        });

    })

  }


  render() {
    const {getFieldDecorator} = this.props.form
    const ProductContent = (props) => {
      return <div className="content">
        {props.secondLevelTitle ? <Paragraph>
          {props.secondLevelTitle}
        </Paragraph> : null}

        {props.introduce ? <Paragraph>
          {props.introduce}
        </Paragraph> : null}
        <p className={styles.contentLink}>
          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 2, productModalTitle: '立即咨询'})
          }}>
            <img
              src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
              alt="start"
            />
            立即咨询
          </a>

          <a onClick={() => {
            this.setState({productvisable: true, businessName: props.title, productType: 1, productModalTitle: '立即下单'})
          }}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info"/>
            立即下单
          </a>
          <Link to={props.productGuideURL||''}>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc"/>
            产品指南
          </Link>
        </p>
      </div>
    };

    const extraContent = (
      <img
        src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
        alt="content"
      />
    );

    const formItemLayout = {
      labelCol: {
        xs: {span: 6},


      },
      wrapperCol: {
        xs: {span: 18},

      },
    };

    const productList = [
      {
        title: '货前融资服务',
        // secondLevelTitle: '出口退税是指国家运用税收杠杆奖励出口的一种措施。一般分为两种',
        introduce: '洲博通与几十家银行完成对接，为客户精心挑选无抵押无担保，授信额度高，审批快，利息低的贷款产品。帮助客户获得资金，保障生产，能够按时交付订单。洲博通提供的货前融资服务采用全程线上评估额度，线上放款的方式。客户完成线上授权后，经过数据匹配20分钟内即可获得数十家银行产品的信贷建议，同时能帮助客户了解自身财务情况，方便客户及早修复并改善企业信用，更加规范经营',
        productGuideURL: '/manage/finance/foreignCredit',
      },
      {
        title: '货后融资服务',
        introduce: '出货后融资服务是洲博通平台为中小外贸企业解决融资难融资贵问题而推出的特色金融产品。主要为客户提供出货后的应收账款融资，同时支持信用证和电汇两种结算方式。出货后融资按天计息，用款方便，且不占用客户的贷款征信记录。信用证项下最高可融资100%；电汇项下最高可融资80%。帮助客户顺利承接赊销订单，加速资金周转，实现利润倍增！',
        productGuideURL: '/service/product-guide?pruductName=baoli',
      },
      {
        title: '保险征信服务',
        introduce: '洲博通平台与国际各大保险公司建立合作，出台出口信用险和货物运输险的服务产品。客户无需购买大保单，更无需支付最低保费即可通过洲博通灵活投保，享受优惠费率，每年节省数万美金成本。更有洲博通的单证专家为您把关出口单证，确保交易无忧。\n' +
          '同时洲博通大数据中心为客户提供全球139个国家和地区全行业的公司数据，实时在线查询数据，调取买家资信报告。',
        productGuideURL: '/manage/service/insurance/creditInsurance',
      },
      {
        title: '全球催收服务',
        introduce: '洲博通携手全球知名机构，通过合法合规的方式，为客户在全球范围内追索被拖欠的应收账款，解决历史遗留问题。覆盖全球200个国家和地区。前期0费用，款项回到您的账户后再支付相关手续费，历史催收成功率高达80%。洲博通帮助客户捍卫每一分利润，维护自身的合法权益。',
        productGuideURL: '/manage/service/applyAmount',
      },
    ]


    return (
      <>
        <div style={{maxWidth: '1200px', margin: 'auto', background: '#fff', paddingTop: 80, paddingBottom: 80}}>
          {productList.map(item => {
            return <PageHeader title={item.title}>
              <div className={styles.wrap}>
                <div className={styles.content}><ProductContent {...item} /></div>
                <div className={styles.extraContent}>{extraContent}</div>
              </div>
            </PageHeader>
          })}
        </div>

        <Modal
          title={this.state.productModalTitle || false}
          width={700}
          closable={false}
          visible={this.state.productvisable}
          onOk={this.handleSubmit}
          onCancel={() => {
            this.setState({productvisable: false});
            this.props.form.resetFields()
          }}
        >
          <Form>
            <div style={{marginBottom: 50}}>感谢您关注洲博通外贸综合服务平台！您可以直接拨打我们的客服电话400-189-2323咨询下单，也可以在下方留下您的联系方式，我们会尽快给您回电。
            </div>
            <Row gutter={16}>
              <Col span={12}>
                <FormItem label="业务类型" {...formItemLayout}>
                  {getFieldDecorator('businessName', {
                    initialValue: this.state.businessName,
                    rules: [
                      {required: true, message: '业务类型不能为空'},
                    ],
                  })(<Input disabled>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系人" {...formItemLayout}>
                  {getFieldDecorator('contacts', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系人不能为空'},
                      {min: 2, max: 6, message: '请输入正确的联系人'}
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>

              <Col span={12}>
                <FormItem label="联系电话" {...formItemLayout}>
                  {getFieldDecorator('phone', {
                    initialValue: '',
                    rules: [
                      {required: true, message: '联系电话不能为空'},
                      {pattern: Validator.mobile, message: '联系电话格式有误'},
                    ],
                  })(<Input>
                  </Input>)}
                </FormItem>
              </Col>

              {/*<Col span={12}>*/}
              {/*  <FormItem label="租户编码" {...formItemLayout}>*/}
              {/*    {getFieldDecorator('code', {*/}
              {/*      initialValue: '',*/}
              {/*      rules: [*/}
              {/*        {required: true, message: '租户编码不能为空'},*/}
              {/*      ],*/}
              {/*    })(<Input>*/}
              {/*    </Input>)}*/}
              {/*  </FormItem>*/}
              {/*</Col>*/}


            </Row>
          </Form>
        </Modal>
      </>
    );
  }
}


export default Form.create({name: 'Service'})(Service)

